<template>
	<div>
		<div class="flex-start-center margin-bottom-4">
			<jk-button v-show="pageType !== 'detail'" type="primary" plain size="mini" class="item-gap" icon="el-icon-zoom-in" @click="onSelectSaleOrderBtn">选择</jk-button>
			<!--<jk-button v-show="pageType !== 'detail'" type="primary" plain size="mini" class="" icon="el-icon-plus" @click="onAddSaleOrderBtn">创建</jk-button>-->
		</div>
		<jk-table
			ref="jkTable"
			:cell-style="cellStyle"
			class="width-100-percent"
			:data="tableData"
			border
			:max-height="200"
		>
			<vxe-table-column :visible="pageType !== 'detail'" field="operation" title="操作" width="60" align="center">
				<template #default="scope">
					<el-button size="mini" icon="el-icon-delete" type="text" @click="onDeleteBtnOfSaleOrder(scope)"></el-button>
				</template>
			</vxe-table-column>
			<vxe-table-column type="seq" width="60" title="序号" align="center"></vxe-table-column>
			<vxe-table-column field="saleOrderCode" title="销售订单" :width="154">
				<template slot-scope="scope">
					<div class="flex-start-center link-style" @click="onEditSaleOrderBtn(scope.row)">
						<span class="item-gap">{{ scope.row.saleOrderCode }}</span>
						<!--<span class="el-icon-edit"></span>-->
					</div>
				</template>
			</vxe-table-column>
			<vxe-table-column field="customerName" title="客户" :width="200" />
			<vxe-table-column field="productName" title="品种" :width="200" />
			<vxe-table-column field="productQty" align="right" title="销售数量" :width="90" />
			<vxe-table-column field="allocatedQty" align="right" title="已下达" :width="80" />
			<vxe-table-column field="awaitAllocatedQty" align="right" title="可下达" :width="80" />
			<vxe-table-column field="orderAllocatedQty" title="下达数量" align="right" :width="100">
				<template #default="scope">
					<span v-if="pageType === 'detail'">{{ scope.row.orderAllocatedQty }}</span>
					<jk-number-input v-else v-model="scope.row.orderAllocatedQty" size="mini" @change="onUpdateParent"></jk-number-input>
				</template>
			</vxe-table-column>
		</jk-table>
		<checkboxSaleOrderDialog
			:product-name="formData.productName"
			:default-select-rows="tableData"
			:dialog-state="checkboxSaleOrderDialogState"
			@on-visible-change="onVisibleChangeOfCheckboxSaleOrderDialog"
			@on-confirm="onConfirmOfCheckboxSaleOrderDialog"
		></checkboxSaleOrderDialog>
		<save-sale-order-dialog
			:page-type="saveSaleOrderDialogPageType"
			:data-id="saveSaleOrderDialogDataId"
			:dialog-state="saveSaleOrderDialogState"
			@on-visible-change="onVisibleChangeOfSaveSaleOrderDialogState"
			@on-finish="onFinishOfSaveSaleOrderDialogState"
		></save-sale-order-dialog>
	</div>
</template>
<script>
    import checkboxSaleOrderDialog from './checkbox-sale-order-dialog';
    import saleOrderMx from './mx';
    import { mathJsAdd } from '../../../../../utils/jk/jk-cals';
    import saveSaleOrderDialog from '../../../saleOrder/save-dialog';
    import { productionSaleOrderGet } from '../../../../../api/production/order';
    export default {
        props: {
            formData: {
                type: Object,
                default() {
                    return {};
                }
            },
            pageType: {
                type: String,
                default: '' // 新增add;编辑edit;详情detail
            }
        },
        mixins: [saleOrderMx],
        components: {
            saveSaleOrderDialog,
            checkboxSaleOrderDialog
        },
        data() {
            return {
                saveSaleOrderDialogPageType: '',
                saveSaleOrderDialogDataId: null,
                saveSaleOrderDialogState: false,
                checkboxSaleOrderDialogState: false,
                tableData: []
            };
        },
        methods: {
            onEditSaleOrderBtn(row) {
                this.saveSaleOrderDialogPageType = 'detail';
                this.saveSaleOrderDialogDataId = row.saleOrderId;
                this.saveSaleOrderDialogState = true;
            },
            onFinishOfSaveSaleOrderDialogState(id) {
                if (!id) return;
                productionSaleOrderGet({ id }).then(res => {
                    if (res.data.status === 200) {
                        const resData = res.data.res || {};
                        if (this.saveSaleOrderDialogPageType === 'edit') {
                            this.tableData.forEach(x => {
                                if (x.saleOrderId === this.saveSaleOrderDialogDataId) {
                                    x.saleOrderQty = resData.saleOrderQty;
                                    x.allocatedQty = resData.allocatedQty;
                                    x.awaitAllocatedQty = resData.awaitAllocatedQty;
                                }
                            });
                        } else {
                            if (resData.productList) {
                                resData.productList.map(x => {
                                    this.tableData.push(this.getSaleOrderItemInfo({
                                        saleOrderId: resData.id,
                                        saleOrderCode: resData.code,
                                        saleOrderCustomerId: resData.saleOrderCustomerId,
                                        saleOrderCustomerCode: resData.saleOrderCustomerCode,
                                        saleOrderCustomerName: resData.saleOrderCustomerName,
                                        id: x.id,
                                        awaitAllocatedQty: x.awaitAllocatedQty,
                                        allocatedQty: x.allocatedQty,
                                        productQty: x.productQty,
                                        productId: x.productId,
                                        productCode: x.productCode,
                                        productName: x.productName,
                                        productModels: x.productModels,
                                        unitId: x.unitId,
                                        unitCode: x.unitCode,
                                        unitName: x.unitName
                                    }));
                                });
                            }
                        }
                        this.saveSaleOrderDialogState = false;
                        this.onUpdateParent();
                    }
                });
            },
            onVisibleChangeOfSaveSaleOrderDialogState(e) {
                this.saveSaleOrderDialogState = e;
            },
            cellStyle(e) {
                let styleCfg = {};
                // 生产数量超出 '已下达' + '可下达'时，设置字体为红色
                if ((e.row.orderAllocatedQty || 0) > mathJsAdd(e.row.allocatedQty || 0, e.row.awaitAllocatedQty || 0)) {
                    styleCfg = {
                        color: '#F95457'
                    };
                }
                return styleCfg;
            },
            onConfirmOfCheckboxSaleOrderDialog(data) {
                if (data) {
                    data.forEach(x => {
                        this.tableData.push(this.getSaleOrderItemInfo(x));
                    });
                }
                this.checkboxSaleOrderDialogState = false;
                this.onUpdateParent();
            },
            onVisibleChangeOfCheckboxSaleOrderDialog(e) {
                this.checkboxSaleOrderDialogState = e;
            },
            onSelectSaleOrderBtn() {
                this.checkboxSaleOrderDialogState = true;
            },
            onAddSaleOrderBtn() {
                this.saveSaleOrderDialogDataId = null;
                this.saveSaleOrderDialogPageType = 'add';
                this.saveSaleOrderDialogState = true;
            },
            onDeleteBtnOfSaleOrder(scope) {
                this.tableData.splice(scope.rowIndex, 1);
                this.onUpdateParent();
            },
            onUpdateParent() {
                this.$emit('update', JSON.parse(JSON.stringify(this.tableData)));
            }
        },
        watch: {
            formData: {
                handler(newVal) {
                    this.tableData = newVal.productOrderSaleList ? JSON.parse(JSON.stringify(newVal)).productOrderSaleList.map(x => {
                        x.isExceed = false;
                        if (mathJsAdd(x.allocatedQty || 0, x.awaitAllocatedQty || 0) > x.orderAllocatedQty || 0) {
                            x.isExceed = true;
                        }
                        return x;
                    }) : [];
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>
